<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="container">
            <div class="header-left">
                <img src="img/1.png" />
            </div>
            <div class="header-right">
                <p>
                    <img src="img/2.png" alt="">
                    <span id="city">沧州市</span>
                </p>
                <p>
                    <input type="text" id="ipt" placeholder="搜索城市">
                </p>
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="left">
                <p>
                    中央气象台 15:45发布
                </p>
                <p>
                    <span id="du">

                    </span>
                    <strong>
                        °
                    </strong>
                    <span id="duoyun">

                    </span>
                    <span class="span1">
                        <img src="img/4.png" alt="">
                        33 <del id="liang"></del>
                    </span>
                </p>
                <p class="p1">
                    <img src="img/5.png" alt="">
                    <span id="feng">

                    </span>
                    <span id="ji">

                    </span>
                    <span class="t">
                        级
                    </span>

                    <img src="img/6.png" alt="">
                    <span>
                        湿度
                    </span>
                    <span>
                        28
                    </span>
                    <span class="t">
                        %
                    </span>
                    <img src="img/7.png" alt="">
                    <span>
                        气压
                    </span>
                    <span id="qiya">

                    </span>
                    <span>
                        hpa
                    </span>
                </p>
                <p>
                    <span></span>
                    <i id="tianqi"></i>

                </p>
            </div>
            <div class="right">
                <img src="img/3.png" alt="">
            </div>
        </div>
    </section>
    <div class="xs">
        <div class="container clearfix">
            <h3>
                <span>

                </span>
                逐小时预报
            </h3>
            <span class="ss">
                数据来源于中国天气网
            </span>
            <img src="img/9.png" alt="">
            <img src="img/8.png" alt="">
            <ul id="ll">
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p></p>
                    <p><span></span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <!-- <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li>
                <li>
                    <p>16：00</p>
                    <p><span>22</span>°</p>
                </li> -->
            </ul>
        </div>
    </div>
    <div class="tq">
        <div class="container">
            <div class="row">
                <div class="col-7 bai">
                    <div class="ri">
                        <h3><span></span>7日天气预报</h3>
                        <button>15日天气预报</button>
                    </div>
                    <div class="list" id="list">
                        <ul>
                            <li>
                                <p>今天</p>
                                <p>
                                    <!-- 09月19日 -->
                                </p>
                                <p>
                                    多云
                                </p>
                                <p>
                                    <span>23</span>
                                    ° ~
                                    <span>16</span>
                                    °
                                </p>
                                <p>
                                    <span>西南风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                            <li>
                                <p>明天</p>
                                <p>
                                    09月20日
                                </p>
                                <p>
                                    多云
                                </p>
                                <p>
                                    <span>24</span>
                                    ° ~
                                    <span>16</span>°
                                </p>
                                <p>
                                    <span>西风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                            <li>
                                <p>后天</p>
                                <p>
                                    09月21日
                                </p>
                                <p>
                                    晴
                                </p>
                                <p>
                                    <span>27</span>
                                    ° ~
                                    <span>15</span>°
                                </p>
                                <p>
                                    <span>西南风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                            <li>
                                <p>周一</p>
                                <p>
                                    09月22日
                                </p>
                                <p>
                                    晴
                                </p>
                                <p>
                                    <span>26</span>
                                    ° ~
                                    <span>15</span>°
                                </p>
                                <p>
                                    <span>西南风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                            <li>
                                <p>周二</p>
                                <p>
                                    09月23日
                                </p>
                                <p>
                                    晴
                                </p>
                                <p>
                                    <span>28</span>
                                    ° ~
                                    <span>16</span>°
                                </p>
                                <p>
                                    <span>西南风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                            <li>
                                <p>周三</p>
                                <p>
                                    09月24日
                                </p>
                                <p>
                                    晴
                                </p>
                                <p>
                                    <span>28</span>° ~ <span>16</span>°
                                </p>
                                <p>
                                    <span>东南风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                            <li>
                                <p>周四</p>
                                <p>
                                    09月25日
                                </p>
                                <p>
                                    多云
                                </p>
                                <p>
                                    <span>28</span>
                                    ° ~
                                    <span>16</span>°
                                </p>
                                <p>
                                    <span>东南风</span>
                                    <span>3</span>
                                    级
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-5 s">
                    <div class="sh">
                        <h3><span></span>生活指数</h3>
                        <img src="img/9.png" alt="">
                        <img src="img/8.png" alt="">
                    </div>
                    <ul>
                        <li>
                            <img src="img/10.png" alt="">
                            <span>穿衣 较舒适</span>
                            <p class="pp">
                                <span id="chuanyi"></span>
                            </p>

                        </li>
                        <li>
                            <img src="img/11.png" alt="">
                            <span>雨伞 不带伞</span>
                            <p class="pp">
                                <span id="xiayu">

                                </span>
                            </p>
                        </li>
                        <li>
                            <img src="img/10.png" alt="">
                            <span>感冒 沙发</span>
                            <p class="pp">
                                <span id="ganmao"></span>
                            </p>
                        </li>
                        <li>
                            <img src="img/10.png" alt="">
                            <span>洗车 适宜</span>
                            <p class="pp">
                                <span id="xiche"></span>

                            </p>
                        </li>
                        <li>
                            <img src="img/10.png" alt="">
                            <span>运动 适宜</span>
                            <p class="pp">
                                <span id="yundong"></span>
                            </p>
                        </li>
                        <li>
                            <img src="img/10.png" alt="">
                            <span>防晒 较弱</span>
                            <p class="pp">
                                <span id="fangshai"></span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>




    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>